<template>
  <div>
    <div class="work_info">
      <el-card class="box-card">
        <div class="clearfix">
          <span class="head">{{ work.header }}</span>
          <div class="introduce">
            <span style="color: #999999; font-size: 14px">作者: </span>
            &nbsp;&nbsp;
            <el-avatar :src="work.user.avatar" size="small"></el-avatar>
            &nbsp;&nbsp;
            <el-link @click.native="showInfo(work.user.userId)" type="primary">{{ work.user.nickname }}</el-link>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span style="color: #999999; font-size: 14px">{{
              work.gmtCreate
            }}</span>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="text item">
          <el-row :gutter="24">
            <el-col :span="2" class="image">
              <el-image
                @click="setIsGood()"
                v-if="!isGood"
                style="width: 30px; height: 30px"
                :src="require('../assets/ali/status_bad.png')"
              ></el-image>
              <el-image
                @click="setIsGood()"
                v-else
                style="width: 30px; height: 30px"
                :src="require('../assets/ali/status_good.png')"
              ></el-image>
              <br/>
              <span style="margin-top: 20px">{{ work.goodNum }}</span>
              <el-divider></el-divider>
              <el-image
                @click="setIsCollect()"
                v-if="!isCollect"
                style="width: 30px; height: 30px"
                :src="require('../assets/ali/status_bad_collect.png')"
              ></el-image>
              <el-image
                @click="setIsCollect()"
                v-else
                style="width: 30px; height: 30px"
                :src="require('../assets/ali/status_good_collect.png')"
              ></el-image>
              <br/>
              <span style="margin-top: 20px">{{ work.collectNum }}</span>
            </el-col>
            <el-col :span="22">
                <p style="background-color: rgb(246, 248, 250);" v-html="work.content"></p>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import work from "@/api/work";
import good from "@/api/good";
import collect from "@/api/collect";
import store from "@/store";

export default {
  data() {
    return {
      work: {},
      id: 0,
      isGood: false,
      isCollect: false,
    };
  },

  created() {
    this.id = this.$route.query.id;
    this.init();
    this.getIsCollect();
    this.getIsGood();
  },

  methods: {
    init() {
      work.getByWorkId(this.id).then((res) => {
        if (res.success) {
          this.work = res.data.work;
          console.log(this.work);
        }
      });
    },
    getIsGood() {
      if ( this.$store.state.user.userId !== 0 ) {
        good.isGoodWork(this.id, this.$store.state.user.userId).then( res => {
          if ( res.success ) {
            this.isGood = res.data.isGood
          }
        })
      }
    },
    getIsCollect() {
      if ( this.$store.state.user.userId !== 0 ) {
        collect.isCollectWork(this.id, this.$store.state.user.userId).then( res => {
          if ( res.success ) {
            this.isCollect = res.data.isCollect
          }
        })
      }
    },
    setIsGood() {
      if (this.$store.state.user.userId !== 0) {
        if (!this.isGood) {
          work.goodAdd(this.id, this.$store.state.user.userId).then((res) => {
            if (res.success) {
              this.init();
              store.commit("setGoodNumAdd");
              this.isGood = !this.isGood;
            } else {
              this.$message({
                message: "请出错了，稍后再试",
                type: "error",
              });
            }
          });
        } else {
          work.goodSubtract(this.id, this.$store.state.user.userId).then((res) => {
            if (res.success) {
              this.init();
              store.commit("setGoodNumSubtract");
              this.isGood = !this.isGood;
            } else {
              this.$message({
                message: "请出错了，稍后再试",
                type: "error",
              });
            }
          });
        }
      } else {
        this.$message({
          message: "请先登录",
          type: "info",
        });
        this.$router.push({ path: "/login" });
      }
    },
    setIsCollect() {
      if (this.$store.state.user.userId !== 0) {
        if (!this.isCollect) {
          work.collectAdd(this.id, this.$store.state.user.userId).then((res) => {
            if (res.success) {
              this.init();
              store.commit("setCollectNumAdd");
              this.isCollect = !this.isCollect;
            } else {
              this.$message({
                message: "请出错了，稍后再试",
                type: "error",
              });
            }
          });
        } else {
          work.collectSubtract(this.id, this.$store.state.user.userId).then((res) => {
            if (res.success) {
              this.init();
              store.commit("setCollectNumSubtract");
              this.isCollect = !this.isCollect;
            } else {
              this.$message({
                message: "请出错了，稍后再试",
                type: "error",
              });
            }
          });
        }
      } else {
        this.$message({
          message: "请先登录",
          type: "info",
        });
        this.$router.push({ path: "/login" });
      }
    },
    showInfo(id) {
      this.$router.push({ path: "/space", query: {id: id}})
    }
  },
};
</script>

<style scoped>
.work_info {
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 5%;
}

.image {
  text-align: center;
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}

.head {
  font-weight: bold;
  font-size: large;
}
.font {
  font-family: Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
.introduce {
  margin-top: 5px;
  display: flex;
  align-items: center;
  /* font-family: Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; */
  /* justify-content: center; */
}
</style>